<template>
    <div>
        <div  class="tabbar-bottom-height">
            <div @click="changeTabbar(item)" v-for="(item,index) in list" :key="index" class="tabbar-box">
                <img v-if="active===item.id" :src="item.active" alt="">
                <img v-else :src="item.item" alt="">
                <p :class="{'active':item.id === active}">{{item.name}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                istaBbar:true,
                active:1,//是否选中其中一个
                list:[
                    {id:1,name:'首页',active:require('@/assets/image/home1.png'),item:require('@/assets/image/home2.png'),path:'/'},
                    {id:2,name:'商品',active:require('@/assets/image/cate1.png'),item:require('@/assets/image/cate2.png'),path:'/product'},
                    {id:3,name:'购物车',active:require('@/assets/image/shop.png'),item:require('@/assets/image/shop2.png'),path: '/shop'},
                    {id:4,name:'我的',active:require('@/assets/image/user.png'),item:require('@/assets/image/user2.png'),path:'/mine'}
                ]//页面中得list标签
            }
        },
        methods:{
            changeTabbar(item){
                this.$router.push(item.path).catch(err=>{})
                this.active=item.id
            },
            getPath(){
              setTimeout(()=>{
                if (/product/.test(this.$route.name)){
                  this.active =2
                }else if (/mine/.test(this.$route.name)){
                  this.active =4
                }else if (/shop/.test(this.$route.name)){
                  this.active =2
                }else{
                  this.active =1
                }
              },100)

            }
        },

      mounted() {
          this.getPath()
      },

      watch: {
        $route: {
          handler(newValue, oldValue) {
            if (/product/.test(newValue.path)){
              this.active =2
            }
          }
        },
        deep: true,
        immediate: true,
      },
    }
</script>

<style scoped lang="scss">
    .tabbar-bottom-height {
        height: 60px;
        position: fixed;
        padding: 5px 0 0 0;
        box-sizing: border-box;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 0.25rem rgba(0,0,0,.08);
        .tabbar-box {
            width: 25%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 5px 0 ;
            box-sizing: border-box;
            img{
                height: 20px;
            }
            p{
                width: 100%;
                text-align: center;
                color: #aaa;
                font-size: 10px;
            }
            .active{
                color: #002FFF;
            }
        }
    }
</style>
